<script setup lang="ts">
import { ref } from "vue";

const Url= ref('https://ts1.cn.mm.bing.net/th?id=OIP-C.kOazpqV3UwKr-SKpD9R4KwHaHa&w=250&h=250&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.3&pid=3.1&rm=2')


const changeImg = ()=>{
    Url.value = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.PYySIz2mcqN9AVaoj6lsJgHaHO?w=167&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7'
}

const buluShow = ref(false) 

const changeBox = ()=>{
  buluShow.value = !buluShow.value
}
</script>



<template>

<div>
<!-- 不影响class情况下 去设置其他的class -->

  <!-- v-bind 基本用法 v-bind：属性名 简写就是 :属性名 -->
  <!-- <img @click="changeImg" v-bind:src="Url" alt=""> -->

  <img @click="changeImg" :src="Url" alt="">

</div>

<!-- :class="{ 类名：是否生效的表达式 }" -->
<div class="box" @click="changeBox" :class="{buluStr:buluShow}">

</div>

</template>



<style scoped>
div img{
  width: 200px;
  height: 200px;
}

.box{
  width: 100px;
  height: 100px;
  border: 1px solid chartreuse;
}
.buluStr{
  border: 10px solid blue;
  background-color: yellow;
}
</style>